<template>
  <!-- 租箱 开还箱单 -->
  <div class="app-container">
    <span style="font-weight: 700;font-size: 15px;">
      <span style="width:3px;height:20px;background-color: #2158F3;"> &nbsp</span>
      <span v-if="param.opt == 'huanXiang'">开还箱单据</span>
      <span v-if="param.opt == 'tiXiang'">开提箱单</span>
    </span>
    <div style="margin-top: 40px;">
      <span>租箱订单</span>
    </div>
    <el-table :data="param.rentOrderTable" style="width: 100%;">
      <el-table-column prop="orderNo" label="订单号" width="200"> </el-table-column>
      <el-table-column label="预计提箱日期" width="120">
        <template #default="scope">
          {{ formatDate(scope.row.planPickupDate, 2) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="下单日期" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.planPickupDate) }}
        </template>
      </el-table-column>
      <template v-if="param.opt == 'huanXiang'">
        <el-table-column prop="returnedNum" label="已还箱量"> </el-table-column>
        <el-table-column prop="unReturnNum" label="未还箱量"> </el-table-column>
      </template>
      <template v-else>
        <el-table-column prop="packingedNum" label="已开箱量"> </el-table-column>
        <el-table-column prop="unPackingNum" label="未开箱量"> </el-table-column>
      </template>
    </el-table>
    <div v-if="param.opt == 'huanXiang'" style="margin-top: 40px;">
      箱型量：{{ boxTypeFilter(rowData.boxType) }} * {{ rowData.packedQuantity }}
    </div>
    <div v-else>
      <div style="margin-top: 40px;">箱型/箱量/箱况</div>
      <el-table :data="param.rentBoxTable" style="width: 100%">
        <el-table-column prop="boxType" label="箱型" width="180"> </el-table-column>
        <el-table-column prop="boxQuantity" label="箱量" width="180"> </el-table-column>
        <el-table-column prop="boxCondition" label="箱况"> </el-table-column>
      </el-table>
    </div>
    <el-form :model="param" ref="packingFormRef" :rules="packingRules" style="margin-top: 40px;">
      <!-- 还箱单 -->
      <div v-if="param.opt == 'huanXiang'">
        <el-form-item>
          <div>
            <redStar />单据类型
          </div>
          <el-select v-model="param.returnBoxType" style="width: 100%;" placeholder="请选择">
            <el-option v-for="item in param.returnBoxTypeList" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <template v-if="param.returnBoxType == 5">
          <el-form-item prop="instructionNum">
            <div>
              <redStar />还箱指令号
            </div>
            <el-input v-model="param.instructionNum" style="width: 100%;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item prop="returnValidityPeriod">
            <div>
              <redStar />还箱单有效期范围
            </div>
            <el-date-picker v-model="param.returnValidityPeriod" type="daterange" range-separator="~"
              start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" />
          </el-form-item>
        </template>
      </div>
      <div v-if="param.returnBoxType == 15">
        <el-form-item prop="instructionNum">
          <div>
            <redStar />还箱指令号
          </div>
          <el-input v-model="param.instructionNum" style="width: 100%;" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="returnValidityPeriod">
          <div>
            <redStar />还箱令有效期范围
          </div>
          <el-date-picker v-model="param.returnValidityPeriod" type="daterange" range-separator="~"
            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" />
        </el-form-item>
      </div>
      <!-- 提箱单 -->
      <div v-if="param.opt == 'tiXiang'">
        <el-form-item prop="instruction">
          <div>
            <redStar />放箱指令号
          </div>
          <el-input v-model="param.instruction" style="width: 100%;" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="packingValidityPeriod">
          <div>
            <redStar />提箱单有效期范围
          </div>
          <el-date-picker v-model="param.packingValidityPeriod" type="daterange" range-separator="~"
            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" />
        </el-form-item>
      </div>
      <el-form-item prop="yardName">
        <div>
          <redStar />堆场名称
        </div>
        <yardSelect v-model="param.yardName" :selectName="'yardName'" :needInfo="true" @yardId="yardInfoData"
          style="width:100%" :placeholder="'请输入堆场名称'">
        </yardSelect>
      </el-form-item>
      <el-form-item>
        <div>堆场地址</div>
        <el-input v-model="yardInfo.yardAddress" disabled style="width: 100%;" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <div>联系人</div>
        <el-input v-model="yardInfo.contacts" disabled style="width: 100%;" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <div>联系电话</div>
        <el-input v-model="yardInfo.tel" disabled style="width: 100%;" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <div>堆场作业时间</div>
        <el-input v-model="yardInfo.workTime" disabled style="width:100%" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <div style="padding: 40px 0 10px 0;">
      <redStar v-if="param.opt == 'huanXiang'" />
      <el-button @click="choiceBox" :disabled="!yardInfo.id" icon="edit">选择箱号</el-button>
    </div>
    <el-table :data="selectBoxList">
      <el-table-column prop="containerNo" label="箱号" />
      <!-- <el-table-column prop="boxType" label="箱型" /> -->
    </el-table>
    <div style="margin-top: 40px;">
      <span v-if="param.opt == 'huanXiang'">
        <!-- <span>还箱单附件</span> -->
        <redStar /><span v-if="param.returnBoxType == 10">箱属附件</span>
        <span v-if="param.returnBoxType == 15"> 还箱令附件 </span>
      </span>
      <span v-else>提箱单附件 </span>
    </div>
    <img-upload ref="packingRef" />
    <div v-if="param.newStep < 20">
      <div style="margin-top: 40px;">备注 </div>
      <el-input v-model="param.remark" type="textarea" placeholder="请输入内容" />
    </div>
    <div style="margin-top: 40px;height: 50px;">
      <el-button v-if="param.opt == 'huanXiang'" @click="handleSubmit('drawer1', 25)" type="primary"
        style="float: right;width: 100px;"> 提交
      </el-button>
      <el-button v-else @click="handleSubmit('drawer1', 10)" type="primary" style="float: right;width: 100px;"> 提交
      </el-button>
    </div>
  </div>
</template>